<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
</head>
<body>
    <div id="app">

        <h1>{{msg}}</h1>

        <!--使用全局组件-->
        <users-list></users-list>


        <!--使用局部组件-->
        <emps></emps>
    </div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>

    //vue中组件   全局组件 直接注册Vue实例根 在所有组件中可用  局部组件:注册在vue实例内部 局部组件只能组件内部可用

    //参数1:组件名称  参数2:组件模板配置对象  //注意:在定义组件名称时如果组件名称使用驼峰命名法 在使用组件时 单词必须全部小写,同时使用-作为分隔使用
    Vue.component('usersList',{
        template:"<div><h2>用户列表-{{count}}---{{counts}}---{{counts}}</h2><button @click='increment'>+1</button></div>",
        data(){ //用来定义组件数据
            return {
                count:0
            }
        },
        methods:{
            increment(){
                this.count++;
            }
        },
        computed:{
            counts(){
                return this.count*this.count*this.count;
            }
        },
        //定义组件自己生命周期
    });//定义一个全局组件

    //定义员工列表组件配置对象
    const emps = {
        template:"<div><h2>员工列表</h2></div>",
        data(){
            return{};
        },
        methods:{

        },
        computed: {}
    };

    const app = new Vue({
        el:"#app",
        data:{
            msg: "Vue 中组件开发"
        },
        methods:{},
        computed:{},
        components: {  //用来定义一些列局部组件
            emps,
        }
    });
</script>
